import React, { useState } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data';
import TableTitle from '@/components/TableTitle';
import { getTaskPageList } from './service';
import { getLocalStorageInfo } from '@/utils/localStorageInfo';

let customerInfo = getLocalStorageInfo('customerInfo');

const DaoTask: React.FC = () => {
  // Table action 的引用，便于自定义触发
  const actionRef = React.useRef<ActionType>();

  return (
    <ProTable<columnsDataType>
      headerTitle={<TableTitle title="任务列表" />}
      scroll={{ x: 900 }}
      actionRef={actionRef}
      bordered
      // 表头
      columns={columnsData}
      // 请求获取的数据
      request={async (params) => {
        console.log(params);
        let res = await getTaskPageList({
          ...params,
          customerNo: customerInfo.customerNo,
        });
        console.log('😒', res);
        const result = {
          data: res.data,
          total: res.pagination.totalSize,
        };
        return result;
      }}
      rowKey="serialNo"
      // 本地存储表格列的显示数据
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
      }}
      // 搜索框配置
      search={false}
      // 搜索表单的配置
      form={{
        ignoreRules: false,
      }}
      pagination={{
        pageSize: 10,
      }}
      dateFormatter="string"
    />
  );
};

export default DaoTask;
